<template>
	<view class="page" :style="{'min-height':h+'px'}">
		<c-nav-bar1 title="口碑榜" bgColor="transparent" leftIconColor="#fff" :titleStyle="titleStyle"
			:showHome="false"></c-nav-bar1>
		<image class="hbg_img" :src="topBgImg" @tap="turnLinkUri"></image>
		<view class="pbox">
			<view class="tabs">
				<view :class="tidx===0?'active':''" @tap="changeTab(0)">
					<text>住宿</text>
					<image class="bg" v-show="tidx===0"
						src="https://fsy.shengsi.gov.cn/file/20240730/7c9e84d5cb2d4489bdd8fe6aab1d4144.png"></image>
				</view>
				<view :class="tidx===1?'active':''" @tap="changeTab(1)">
					<text>景点</text>
					<image class="bg" v-show="tidx===1"
						src="https://fsy.shengsi.gov.cn/file/20240730/7c9e84d5cb2d4489bdd8fe6aab1d4144.png"></image>
				</view>
				<view :class="tidx===2?'active':''" @tap="changeTab(2)">
					<text>美食</text>
					<image class="bg" v-show="tidx===2"
						src="https://fsy.shengsi.gov.cn/file/20240730/7c9e84d5cb2d4489bdd8fe6aab1d4144.png"></image>
				</view>
			</view>
			<view class="list" v-if="list">
				<block v-if="!isLoading||list.length>0">
					<view class="item" v-for="(item,index) in list" :key="index" @tap="toDetails(item)">
						<view class="i_top">
							<view class="it_left" :class="tidx===1?'jd':''">
								<block v-if="tidx===0">
									<image class="cover" :src="item.cover" mode="aspectFill"></image>
								</block>
								<block v-else-if="tidx===1">
									<image class="cover" :src="item.coverImage" mode="aspectFill"></image>
								</block>
								<block v-else-if="tidx===2">
									<image class="cover" :src="item.storeFrontPic" mode="aspectFill"></image>
								</block>
								<image class="top" :src="topImgs[index]"></image>
							</view>
							<view class="it_right" :class="tidx===1?'jd':(tidx===0&&!item.bottomPrice?'gray':'')">
								<view class="name">{{tidx===1?item.scenicSpotName:item.name}}</view>
								<block v-if="tidx===0">
									<view class="desc">
										<text>{{item.islandName}}</text>
										<span>|</span>
										<text>{{item.categorytext}}</text>
									</view>
									<view class="tips">
										<view v-for="(tip,idx) in item.featureLabelList" :key="idx">{{tip}}</view>
									</view>
									<view class="price_zs" v-if="item.bottomPrice">
										<span class="s1">￥</span>
										<span class="s2">{{item.bottomPrice}}</span>
										<span class="s3">起</span>
									</view>
									<view v-else class="price_zs" style="font-size: 28rpx;">暂无可预订房型</view>
								</block>
								<block v-else-if="tidx===1">
									<view class="desc">
										<text>{{item.scenicName}}</text>
										<span>|</span>
										<text>距离{{item.distence}}</text>
									</view>
									<view class="introduce">{{item.remark}}</view>
									<view class="price_jd">
										<block v-if="item.startPrice">
											<span class="s1">￥</span>
											<span class="s2">{{item.startPrice}}</span>
											<span class="s3">起</span>
										</block>
										<block v-else>
											<text>免费</text>
										</block>
									</view>
								</block>
								<block v-else-if="tidx===2">
									<view class="star">
										<u-rate :count="count" size='33rpx' :value="item.score||5" allowHalf="true"
											activeColor='#FEA400' readonly></u-rate>
										<span class="s1">{{item.score?item.score.toFixed(1):'5.0'}}分</span>
										<span class="s2">￥{{item.personPrice}}/人</span>
									</view>
									<view class="desc">
										<text>{{item.islandName}}</text>
										<span>|</span>
										<text>{{item.foodTypeName}}</text>
									</view>
									<view class="foods">
										<view v-for="(food,idx) in item.products" :key="idx">
											<block v-if="idx<2">
												<view class="yh" v-if="food.discountPrice">惠</view>
												<span class="s1">￥</span>
												<span class="s2">{{food.discountPrice?food.discountPrice:food.price}}</span>
												<span class="s3" v-if="food.discountPrice">￥{{food.price}}</span>
												<!-- <span class="s4">{{food.name}}</span> -->
												<view class="s4"><u--text :lines="1" :text="food.name"></u--text></view>
											</block>
										</view>
									</view>
								</block>
							</view>
						</view>
						<view class="i_reason">
							<span>上榜理由：</span>{{item.rankRemark}}
							<image src="https://i.ringzle.com/file/20240516/e6df534052b84866ad2dd7e98d9479da.png"></image>
						</view>
					</view>
				</block>
				<block v-else>
					<NoData />
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				h: uni.getSystemInfoSync().windowHeight,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				titleStyle: {
					color: 'transparent'
				},
				tidx: 0,
				list: "",
				topImgs: [
					'https://i.ringzle.com/file/20240516/cfef5d039a7b44ad9d4d23b27426f5b0.png',
					'https://i.ringzle.com/file/20240516/37da3138ec14461994028d5faa45e150.png',
					'https://i.ringzle.com/file/20240516/521fd39d65a7451eb53640ea568b4ec0.png',
					'https://i.ringzle.com/file/20240516/958ee584685c4ab6a8f95c176839b218.png',
					'https://i.ringzle.com/file/20240516/c09d732564f943bf8420a7999bcf30a3.png',
					'https://i.ringzle.com/file/20240516/5101c33010b742e79d8daf8039d76d65.png',
					'https://i.ringzle.com/file/20240516/64f373d059914fa0b0815f2e691e880d.png',
					'https://i.ringzle.com/file/20240516/447db47c7c8e4d4c8d2f6c5eacc4f020.png',
					'https://i.ringzle.com/file/20240516/f96cf87bca3c4f998098d5f6f9ca5319.png',
					'https://i.ringzle.com/file/20240516/c6bcf3ec09d247eb9a1a5adf2ccbd290.png'
				],
				count: 5,
				lat: '',
				lon: '',
				isLoading: false,
				topBgImg: 'https://fsy.shengsi.gov.cn/file/20240730/0c1e8ac7aedc49a6a6f86f7e97f30b47.png',
				categorytext: "",
				linkUri:''
			}
		},
		onLoad() {
			let that = this;
			uni.getLocation({
				type: 'wgs84',
				success: function(res) {
					that.lat = res.latitude;
					that.lon = res.longitude;
					that.getList();
				}
			});
			this.getSwiper()
		},
		methods: {
			// 获取轮播图数据
			getSwiper() {
				let type = '24'
				this.$api.get(`/sys/isappletpic/queryBannerByType/${type}`).then(res => {
					if (res.data.code === 0) {
						let list = res.data.data.bannerList.map(b => b.path)
						if(list.length>0){
							 this.topBgImg = list[0];
							 this.linkUri = res.data.data.bannerList[0].linkUri;
						}
					}
				})
			},
			turnLinkUri(){
				if(this.linkUri) uni.navigateTo({url:this.linkUri})
			},
			changeTab(idx) {
				this.tidx = idx;
				this.getList();
			},
			//获取企业行业分类
			getIndustryCategory() {
				return new Promise((resolve, reject) => {
					this.$api.post('/api/dict/getListByTypes', ['food_type']).then(res => {
						let temp = [];
						if (res.data.code === 0) {
							temp = res.data.data;
							resolve(temp);
						} else reject(temp);
					})
				})
			},
			async getList() {
				let hcs = await this.getHotelCategory();
				let foodType = await this.getIndustryCategory();
				this.$api.get('/api/rankTop/queryList?limit=10&page=1&rankTop=1').then(res => {
					if (res.data.code === 0) {
						if (res.data.data) {
							if (this.tidx === 0) {
								this.list = res.data.data.homestayList;
								this.list.forEach(item => {
									let t = hcs.find(h => h.dictValue == item.category);
									item.categorytext = t ? t.dictLabel : ''
									item.cover = item.cover.split(',')[0]
								})

							} else if (this.tidx === 1) {
								this.list = res.data.data.scenicList;
								this.list.forEach(d => {
									d.distence = this.getDistence(+d.lat, +d.lon)
									d.coverImage = d.coverImage.split(',')[0]
								})
							} else if (this.tidx === 2) {
								this.list = res.data.data.merchantList;
								this.list.forEach(l => {
									let _t = foodType.find(f => f.dictValue == l.foodType);
									l.foodTypeName = _t ? _t.dictLabel : ''
									l.storeFrontPic = l.storeFrontPic.split(',')[0]
								})
							}
						}
					} else this.$showModal(res.data.msg);
					this.isLoading = true;
				})
			},

			// 获取酒店等级
			async getHotelCategory() {
				return new Promise((resolve, reject) => {
					this.$api.post('/api/dict/getListByTypes', ['HotelCategory']).then(res => {
						if (res.data.code === 0) {
							resolve(res.data.data);
						} else reject()
					})
				})
			},




			toDetails(item) {
				if (this.tidx === 0) { //住宿
					uni.navigateTo({
						url: "/pagesTrip/hotel/details/index?list=" + JSON.stringify([{
							homestayId: item.id,
							name: item.name,
							arriveDate: new Date().Format('yyyy-MM-dd'),
							leaveDate: new Date(new Date().setDate(new Date().getDate() + 1)).Format(
								'yyyy-MM-dd')
						}])
					})
				} else if (this.tidx === 1) {
					uni.removeStorageSync('spid_old');
					uni.removeStorageSync('price_old');
					uni.navigateTo({
						url: "/pagesTrip/scenicSpots/spotDetail?spid=" + item.ismapId + '&price=' + item
							.startPrice +
							'&isBuy=' + item.isBuy + '&islandName=' + item.scenicName
					})
				} else if (this.tidx === 2) {
					uni.navigateTo({
						url: "/pagesTrip/fineFood/details/details?list=" + encodeURIComponent(JSON.stringify({
							...item
						}))
					})
				}
			},
			getDistence(lat, lon) {
				var radLat1 = lat * Math.PI / 180.0;
				var radLat2 = this.lat * Math.PI / 180.0;
				var a = radLat1 - radLat2;
				var b = lon * Math.PI / 180.0 - this.lon * Math.PI / 180.0;
				var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
					Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
				s = s * 6378.137; // EARTH_RADIUS;
				s = Math.round(s * 10000) / 10000;
				s = s * 1000
				if (isNaN(s)) {
					return 0 + 'm';
				}
				if (s > 1000) {
					//    大于1000米时
					s = Math.floor(s / 1000 * 100) / 100;
					s = s + 'km'
				} else {
					//    小于1000米直接返回
					s = s + 'm'
				}
				return s
			}
		}
	}
</script>

<style scoped lang="less">
	::v-deep .u-text__value.u-line-1{
		margin-left: 4rpx;
		font-weight: 400 !important;
		font-size: 24rpx !important;
		color: #333333 !important;
		line-height: 33rpx !important;
	}
	
	.gray {
		filter: grayscale(100%);
		color: #AAAAAA !important;
	}

	.page {
		background: #D5E8FB;

		.hbg_img {
			width: 100%;
			height: 570rpx;
		}
		
		.pbox{
			width: 100%;
			margin-top: -20rpx;
			background: #D5E8FB;
			border-radius: 28rpx 28rpx 0rpx 0rpx;
			padding: 0 20rpx;
			box-sizing: border-box;
			overflow: hidden;
			    position: relative;
		}

		.tabs {
			width: 100%;
			display: flex;
			justify-content: space-between;
			margin-top: 20rpx;

			&>view {
				width: calc(100% / 3 - 58rpx / 3);
				height: 72rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;

				text {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 32rpx;
					color: #4B2E15;
					position: relative;
					z-index: 2;
					margin-top: -6rpx;
					letter-spacing: 2rpx;
				}

				.bg {
					width: 100%;
					height: 83rpx;
					position: absolute;
					top: 0;
					left: 0;
					z-index: 1;
				}

				&.active {
					text {
						font-weight: 600;
						font-size: 34rpx;
						color: #4B2E15;
					}
				}
			}
		}

		.list {
			width: 100%;
			// height: calc(100% - 694rpx);
			// overflow-y: auto;
			margin-top: 30rpx;

			.item {
				width: 100%;
				padding: 20rpx;
				box-sizing: border-box;
				background: #FFFFFF;
				border-radius: 16rpx;
				margin-top: 20rpx;

				&:first-child {
					margin-top: 0;
				}

				.i_top {
					display: flex;

					.it_left {
						width: 200rpx;
						border-radius: 16rpx;
						position: relative;

						.cover {
							width: 100%;
							height: 240rpx;
							border-radius: 16rpx;
						}

						&.jd {
							width: 212rpx;

							.cover {
								height: 212rpx;
							}
						}

						.top {
							width: 51rpx;
							height: 58rpx;
							position: absolute;
							top: 0;
							left: 0;
							z-index: 3;
						}
					}

					.it_right {
						width: calc(100% - 200rpx);
						padding-left: 24rpx;
						box-sizing: border-box;

						&.jd {
							width: calc(100% - 212rpx);
						}

						.name {
							font-family: PingFangSC, PingFang SC;
							font-weight: 500;
							font-size: 32rpx;
							color: #111111;
							line-height: 40rpx;
							margin-top: 10rpx;
						}

						.star {
							display: flex;
							align-items: center;
							margin-top: 10rpx;

							span {
								font-family: PingFang-SC, PingFang-SC;
								font-size: 24rpx;
								line-height: 24rpx;

								&.s1 {
									margin-left: 6rpx;
									font-weight: bold;
									color: #FEA400;
								}

								&.s2 {
									margin-left: 24rpx;
									font-weight: 400;
									color: #999999;
								}
							}
						}

						.desc {
							display: flex;
							align-items: center;
							margin-top: 16rpx;

							text {
								font-family: PingFangSC, PingFang SC;
								font-weight: 400;
								font-size: 24rpx;
								color: #666666;
								line-height: 32rpx;
							}

							span {
								margin: 0 16rpx 0 10rpx;
								width: 1rpx;
								color: #D9D9D9;
							}
						}

						.foods {
							margin-top: 15rpx;

							&>view {
								margin-top: 10rpx;
								display: flex;
								align-items: baseline;

								.yh {
									width: 32rpx;
									height: 32rpx;
									background: #FFF2E7;
									border-radius: 8rpx;
									text-align: center;
									line-height: 32rpx;
									font-family: PingFang-SC, PingFang-SC;
									font-weight: bold;
									font-size: 20rpx;
									color: #FF7D01;
								}

								span {
									font-family: PingFang-SC, PingFang-SC;
									font-weight: bold;
									color: #FF3E3E;
									font-size: 20rpx;
									line-height: 28rpx;

									&.s1 {
										margin-left: 6rpx;
									}

									&.s2 {
										font-size: 28rpx;
										line-height: 40rpx;
									}

									&.s3 {
										margin-left: 4rpx;
										color: #999990;
										text-decoration: line-through;
									}
								}
							}
						}

						.introduce {
							background: rgba(254, 164, 0, .06);
							border-radius: 4rpx;
							padding: 6rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 22rpx;
							color: #FEA400;
							line-height: 22rpx;
							margin-top: 24rpx;
						}

						.tips {
							margin-top: 10rpx;
							display: flex;
							flex-wrap: wrap;

							&>view {
								border-radius: 4rpx;
								border: 1rpx solid #DCC7AB;
								padding: 8rpx;
								font-family: PingFangSC, PingFang SC;
								font-weight: 400;
								font-size: 22rpx;
								color: #C9A771;
								line-height: 22rpx;
								margin-left: 16rpx;
								margin-top: 10rpx;

								&:first-child {
									margin-left: 0;
								}
							}
						}

						.price_zs {
							display: flex;
							margin-top: 20rpx;
							align-items: baseline;

							span {
								font-family: PingFangSC, PingFang SC;
								color: #FF3E3E;
								font-weight: 400;
								line-height: 33rpx;
								font-size: 24rpx;

								&.s2 {
									font-weight: 600;
									font-size: 40rpx;
									line-height: 40rpx;
								}

								&.s4 {
									font-size: 20rpx;
									color: #999990;
									line-height: 28rpx;
									text-decoration: line-through;
								}
							}
						}

						.price_jd {
							display: flex;
							margin-top: 20rpx;
							align-items: baseline;

							span {
								font-family: Arial, Arial;
								color: #FF4141;
								font-weight: 400;
								line-height: 42rpx;
								font-size: 30rpx;

								&.s2 {
									font-weight: 600;
									font-size: 38rpx;
									line-height: 40rpx;
								}

								&.s3 {
									font-size: 22rpx;
									color: #AAAAAA;
									line-height: 30rpx;
								}
							}

							text {
								font-family: Arial, Arial;
								color: #777;
								font-weight: 600;
								font-size: 32rpx;
								line-height: 40rpx;
							}
						}
					}
				}

				.i_reason {
					width: 100%;
					padding: 14rpx 20rpx;
					box-sizing: border-box;
					position: relative;
					background: #FFF5ED;
					border-radius: 8rpx;
					margin-top: 20rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #876247;
					line-height: 36rpx;
					text-indent: 32rpx;

					span {
						font-weight: 600;
						font-size: 26rpx;
						color: #683E20;
						line-height: 37rpx;
					}

					image {
						width: 36rpx;
						height: 36rpx;
						position: absolute;
						top: 10rpx;
						left: 10rpx;
					}
				}
			}
		}
	}

	/deep/ .nodatadiv {
		padding-top: 0 !important;

		.nodata {
			color: #FFFFFF !important;
		}
	}
</style>